<template>
  <div class="VLabel">
    <div class="VLabel-label" :style="{ width: `${width}px` }">{{ label }}：</div>
    <div class="VLabel-value-box">
      <div class="VLabel-arr" v-if="slot === 'arr'">
        <div class="VLabel-value-num" v-for="item in arrList" @click="goCar(item)">{{ item }}</div>
      </div>
      <div v-else class="VLabel-value">{{ value }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'

const props = defineProps({
  label: {
    type: String,
    default: '',
  },
  value: {
    type: [String, Number],
    default: '',
  },
  width: {
    type: Number,
    default: 120,
  },
  slot: {
    type: String,
    default: '',
  },
  arrList: {
    type: Array,
    default: () => [],
  },
})
const { label, value, width, slot, arrList } = toRefs(props)

function goCar(item: any) {
  router.push({ path: '/carManagementList', query: { carNumber: item } })
}


</script>

<style lang="scss" scoped>
.VLabel {
  margin-bottom: 15px;
  display: flex;
  font-size: 14px;

  .VLabel-value-box {
    margin-left: 20px;

    .VLabel-value-num {
      color: #409eff;
      cursor: pointer;
    }

    .VLabel-value {}
  }


  .VLabel-label {
    text-align: end;

  }
}
</style>
